<template>
  <div class="dongTai_container" v-loading="loading">
    <div class="dongTai_container_title">{{ $route.query.name }}的动态</div>
    <div class="dongTai_container_contact">
      <div class="no_dongtai" v-if="events.length == 0">暂无动态</div>
      <div v-else>
        <div
          class="dongTai_container_contact_inside"
          v-for="item in events"
          :key="item.id"
        >
          <div class="dongTai_container_contact_inside_top">
            <div class="dongTai_img">
              <el-image lazy :src="item.user.avatarUrl" />
            </div>
            <div class="dongTai_name">
              <div
                class="dongTai_name_name"
                @click="jumpYongHu(item.user.userId)"
              >
                {{ item.user.nickname }}
              </div>
              <div style="color: #909399; display: flex">
                <div class="dongTai_name_month">
                  {{
                    `${new Date(item.eventTime).getYear()}年${
                      new Date(item.eventTime).getMonth() + 1
                    }月${new Date(item.eventTime).getDate()}日`
                  }}
                </div>
                <div class="dongTai_name_min">
                  {{
                    `${new Date(item.eventTime).getHours() &lt; 10 ? "0" + new Date(item.eventTime).getHours() : new Date(item.eventTime).getHours()}:${
                      new Date(item.eventTime).getMinutes() &lt; 10
                        ? "0" + new Date(item.eventTime).getMinutes()
                        : new Date(item.eventTime).getMinutes()
                    }`
                  }}
                </div>
              </div>
            </div>
            <div class="donTai_status">{{ dongTaiStatus(item.type) }}</div>
          </div>
          <div class="dongTai_container_contact_inside_middle">
            <div
              class="dongTai_middle_neirong"
              v-if="item.json.resource && item.type == 31"
            >
              <span class="dongTai_middle_neirong_art">@cuicheng</span>
              <span class="dongTai_middle_neirong_contact">{{
                item.json.resource.content
              }}</span>
              <div class="dongTai_middle_neirong_zuozhe">
                {{ item.json.resource.resourceName }}
              </div>
            </div>
            <div
              style="
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px 30px 10px 15px;
              "
              class="dongTai_middle_neirong"
              v-else-if="item.json.resource == null && item.type == 31"
            >
              该评论已删除
            </div>
            <div
              class="dongTai_middle_pic"
              v-else-if="item.json.resource && item.type == 56"
            >
              <div class="dongTai_middle_pic_title">
                <span class="dongTai_middle_pic_titles"
                  >#{{ item.json.resource.title }}#</span
                >
                <span class="">{{ item.json.resource.subTitle }}</span>
              </div>
              <div class="dongTai_middle_pic_pic">
                <el-image lazy :src="item.json.resource.coverImgUrl" />
              </div>
            </div>

            <div class="dongTai_2" v-else-if="item.json && item.type == 35">
              {{ item.json.msg }}
            </div>

            <div
              class="dongTai_middle2"
              v-else-if="item.json.resource && item.type == 57"
            >
              <div class="dongTai_middle2_contact">
                {{ item.json.resource.mlogDetail.content.text }}
              </div>
              <div
                class="dongTai_middle_pic_DanQu_contact"
                v-if="item.json.resource.mlogDetail.type == 1"
              >
                <div class="dongTai_middle_pic_DanQu_contact_img">
                  <el-image
                    v-if="item.json.resource.mlogDetail.content.song.coverUrl"
                    lazy
                    :src="item.json.resource.mlogDetail.content.song.coverUrl"
                  />
                </div>
                <div class="dongTai_middle_pic_DanQu_contact_text">
                  <div class="dongTai_middle_pic_DanQu_contact_text_name">
                    {{ item.json.resource.mlogDetail.content.song.name }}
                  </div>
                  <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                    <span
                      v-for="(childItem, index) in item.json.resource.mlogDetail
                        .content.song.artists"
                      :key="childItem.id"
                    >
                      {{
                        (index ==
                          item.json.resource.mlogDetail.content.song.artists
                            .length -
                            1 &&
                          childItem.artistName) ||
                        childItem.artistName + "/"
                      }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-else>
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                ></video-player>
              </div>
              <div class="dongTai_middle_pic_DanQu_contact_imgArray">
                <div
                  class="dongTai_middle_pic_DanQu_contact_imgArray_img"
                  v-for="(childItem, index) in item.json.resource.mlogDetail
                    .content.image"
                  :key="index"
                >
                  <el-image lazy :src="childItem.imageUrl" />
                </div>
              </div>
            </div>

            <div
              class="dongTai_middle_pic_DanQu"
              v-else-if="item.json && item.type == 18"
            >
              <div
                class="dongTai_middle_pic_DanQu_title"
                :style="{
                  color: item.json.msg.indexOf('#') == -1 ? 'black' : '#66b1ff',
                }"
              >
                {{ item.json.msg }}
              </div>
              <div
                style="cursor: pointer"
                class="dongTai_middle_pic_DanQu_contact"
                @click="
                  boFangSing(
                    item.json.song.name,
                    item.json.song.artists,
                    item.json.song.album.blurPicUrl,
                    item.json.song.id
                  )
                "
              >
                <div class="dongTai_middle_pic_DanQu_contact_img">
                  <el-image
                    v-if="item.json.song.album.blurPicUrl"
                    lazy
                    :src="item.json.song.album.blurPicUrl"
                  />
                </div>
                <div class="dongTai_middle_pic_DanQu_contact_text">
                  <div class="dongTai_middle_pic_DanQu_contact_text_name">
                    {{ item.json.song.name }}
                  </div>
                  <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                    <span
                      v-for="(childItem, index) in item.json.song.artists"
                      :key="childItem.id"
                    >
                      {{
                        (index == item.json.song.artists.length - 1 &&
                          childItem.name) ||
                        childItem.name + "/"
                      }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="dongTai_middle_pic_DanQu"
              v-else-if="item.json && item.type == 19"
            >
              <div class="dongTai_middle_pic_DanQu_title">
                {{ item.json.msg }}
              </div>
              <div class="dongTai_middle_pic_DanQu_contact">
                <div class="dongTai_middle_pic_DanQu_contact_img">
                  <el-image
                    v-if="item.json.album.picUrl"
                    lazy
                    :src="item.json.album.picUrl"
                  />
                </div>
                <div class="dongTai_middle_pic_DanQu_contact_text">
                  <div class="dongTai_middle_pic_DanQu_contact_text_name">
                    {{ item.json.album.name }}
                  </div>
                  <div class="dongTai_middle_pic_DanQu_contact_text_ar">
                    <span
                      v-for="(childItem, index) in item.json.album.artists"
                      :key="childItem.id"
                    >
                      {{
                        (index == item.json.album.artists.length - 1 &&
                          childItem.name) ||
                        childItem.name + "/"
                      }}
                    </span>
                  </div>
                </div>
              </div>
            </div>

            <div
              class="dongTai_zhuanFa"
              v-else-if="item.json && item.type == 22"
            >
              <div class="dongTai_zhuanFa_txt">
                {{ item.json.msg }}
              </div>
              <div
                v-if="item.json.event == null"
                class="dongTai_zhuanFa_otherDongTai"
              >
                <div class="delete_dongTai">该动态已删除</div>
              </div>
              <div
                @click="jumpPengYou(item.json.event)"
                v-else
                class="dongTai_zhuanFa_otherDongTai"
                style="cursor: pointer"
              >
                <div>
                  <div
                    @click.stop="jumpYongHu(item.json.event.user.userId)"
                    class="dongTai_zhuanFa_otherDongTai_name"
                  >
                    @{{ item.json.event.user.nickname }}
                  </div>
                  <div class="dongTai_zhuanFa_otherDongTai_contact">
                    {{ item.json.event.info.commentThread.resourceTitle }}
                  </div>
                </div>
              </div>
            </div>

            <div class="fenXiang_MV" v-else-if="item.json && item.type == 21">
              暂不支持视频/MV播放
            </div>

            <div class="fenXiang_MV" v-else-if="item.json && item.type == 41">
              暂不支持视频/MV播放
            </div>

            <div class="fenXiang_MV" v-else-if="item.json && item.type == 39">
              暂不支持视频/MV播放
            </div>

            <div class="fengXang_BoKe" v-else-if="item.json && item.type == 28">
              <div class="fengXang_BoKe_txt">
                {{ item.json.msg }}
              </div>
              <div class="fengXang_BoKe_contact">
                <div class="fengXang_BoKe_contact_img">
                  <el-image :src="item.json.djRadio.picUrl" lazy />
                </div>
                <div class="fengXang_BoKe_contact_right">
                  <div class="fengXang_BoKe_contact_right_title">
                    <div class="fengXang_BoKe_contact_right_title_left">
                      {{ item.json.djRadio.category }}
                    </div>
                    <div class="fengXang_BoKe_contact_right_title_right">
                      {{ item.json.djRadio.name }}
                    </div>
                  </div>
                  <div style="font-size: 12px">
                    by{{ item.json.djRadio.dj.nickname }}
                  </div>
                </div>
              </div>
            </div>

            <div class="fengXang_BoKe" v-else-if="item.json && item.type == 13">
              <div class="fengXang_BoKe_txt">
                {{ item.json.msg }}
              </div>
              <div @click="jumpGeDan(item.json.playlist.id)" style="cursor: pointer" class="fengXang_BoKe_contact">
                <div class="fengXang_BoKe_contact_img">
                  <el-image :src="item.json.playlist.coverImgUrl" lazy />
                </div>
                <div class="fengXang_BoKe_contact_right">
                  <div class="fengXang_BoKe_contact_right_title">
                    <div class="fengXang_BoKe_contact_right_title_left">
                      歌单
                    </div>
                    <div class="fengXang_BoKe_contact_right_title_right">
                      {{ item.json.playlist.name }}
                    </div>
                  </div>
                  <div style="font-size: 12px">
                    by{{ item.json.playlist.creator.nickname }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="dongTai_container_contact_inside_bottome">
            <div class="dongTai_container_contact_inside_bottome_middle">
              <div
                class="dongTai_container_contact_inside_bottome_middle_inside"
              >
                <div
                  class="
                    dongTai_container_contact_inside_bottome_middle_inside_cen
                  "
                >
                  <i style="font-size: 15px" class="el-icon-thumb" />
                  <span>({{ item.info.likedCount }})</span>
                </div>
              </div>
              <div
                class="dongTai_container_contact_inside_bottome_middle_inside"
              >
                <div
                  class="
                    dongTai_container_contact_inside_bottome_middle_inside_cen
                  "
                >
                  <i style="font-size: 15px" class="el-icon-position" />
                  <span>({{ item.info.shareCount }})</span>
                </div>
              </div>
              <div
                class="dongTai_container_contact_inside_bottome_middle_inside"
              >
                <div
                  class="
                    dongTai_container_contact_inside_bottome_middle_inside_cen
                  "
                >
                  <i style="font-size: 15px" class="el-icon-tickets" />
                  <span>({{ item.info.commentCount }})</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="no_this_dongTai" v-show="isloadingIcon">
      <i class="el-icon-loading" />
    </div>
    <div class="no_this_dongTai" v-show="isNoDongTai">没有更多了</div>
  </div>
</template>

<script>
import {
  commonDongTaiComputed,
  boFangSing,
} from "../../../common/mixin/commonJs";
import { userEvent } from "../../../api/index";
import _ from "lodash";
export default {
  mixins: [commonDongTaiComputed, boFangSing],
  mounted() {
    window.onscroll = () => {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      if (scrollTop + windowHeight == scrollHeight) {
        this.jieliu();
      }
    };
  },
  created() {
    this.loading = true;
    userEvent({ uid: this.$route.query.id }).then((res) => {
      this.lasttime = res.lasttime;
      this.events = res.events;
      for (let i = 0; i < this.events.length; i++) {
        this.events[i].json = eval("(" + this.events[i].json + ")");
      }

      this.events.forEach((element) => {
        if (element.json.resource) {
          if (element.json.resource.mlogDetail != null) {
            if (element.json.resource.mlogDetail.type == 2) {
              this.playerOptions.sources[0].src =
                element.json.resource.mlogDetail.content.video.urlInfo.url;
            }
          }
        }
      });

      console.log(res);
      this.loading = false;
    });
  },
  data() {
    return {
      isloadingIcon: false,
      isNoDongTai: false,
      lasttime: null,
      loading: false,
      events: [],
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: "", //url地址
          },
        ],
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
    };
  },
  methods: {
    jumpGeDan(id){
      this.$router.push({
        path: "/geDanInfo",
        query: {
          id,
        },
      });
    },
    jumpYongHu(id) {
      this.$router.push({
        path: "/yongHu",
        query: {
          id,
        },
      });
    },
    jumpPengYou(useEvents) {
      this.$router.push({
        path: "/pengyou",
        query: {
          useEvents,
        },
      });
    },
    jieliu: _.debounce(function () {
      this.isloadingIcon = true;
      userEvent({ uid: this.$route.query.id, lasttime: this.lasttime }).then(
        (res) => {
          if (res.lasttime == undefined || res.lasttime == this.lasttime) {
            this.isNoDongTai = true;
            this.isloadingIcon = false;
          } else {
            this.lasttime = res.lasttime;

            for (let i = 0; i < res.events.length; i++) {
              res.events[i].json = eval("(" + res.events[i].json + ")");
            }

            this.events.push(...res.events);

            this.events.forEach((element) => {
              if (element.json.resource) {
                if (element.json.resource.mlogDetail != null) {
                  if (element.json.resource.mlogDetail.type == 2) {
                    this.playerOptions.sources[0].src =
                      element.json.resource.mlogDetail.content.video.urlInfo.url;
                  }
                }
              }
            });

            this.isloadingIcon = false;
          }
        }
      );
    }, 300),
  },
};
</script>

<style lang="scss" scoped>
@import "../../../common/css/commonStyle";
.dongTai_container {
  width: 95%;
  .dongTai_container_title {
    padding-top: 20px;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
  }
  .dongTai_container_contact {
    .no_dongtai {
      @include flex;
      height: 200px;
    }
    .dongTai_container_contact_inside {
      padding: 10px;
      border-bottom: 1px solid #eeeff1;
      .dongTai_container_contact_inside_top {
        display: flex;
        .dongTai_img {
          width: 40px;
          height: 40px;
          margin-right: 10px;
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .dongTai_name {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 13px;
          width: 135px;
          .dongTai_name_name {
            color: #66b1ff;
            cursor: pointer;
          }
          .dongTai_name_month {
            margin-right: 5px;
          }
        }
        .donTai_status {
          font-size: 13px;
          color: #909399;
        }
      }
      .dongTai_container_contact_inside_middle {
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: center;
        // margin-bottom: 10px;
        .dongTai_middle_neirong {
          width: 85%;
          background: #eeeff1;
          padding: 5px 30px 5px 15px;
          border-radius: 5px;
          .delete_PingLun {
            font-size: 13px;
          }
          .dongTai_middle_neirong_art {
            color: #66b1ff;
            font-size: 13px;
            cursor: pointer;
            margin-right: 5px;
          }
          .dongTai_middle_neirong_contact {
            font-size: 13px;
          }
          .dongTai_middle_neirong_zuozhe {
            margin-top: 20px;
            font-size: 13px;
            color: rgb(144, 147, 153);
          }
        }
        .dongTai_middle_pic {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .dongTai_middle_pic_title {
            font-size: 13px;
            margin-bottom: 10px;
            .dongTai_middle_pic_titles {
              color: #66b1ff;
            }
          }
          .dongTai_middle_pic_pic {
            width: 150px;
            height: 150px;
            border-radius: 5px;
            .el-image {
              width: 100%;
              height: 100%;
            }
          }
        }
        .dongTai_2 {
          width: 85%;
          padding: 5px 30px 5px 15px;
        }
        .dongTai_middle2 {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .dongTai_middle2_contact {
            font-size: 13px;
            margin-bottom: 10px;
          }
          .dongTai_middle_pic_DanQu_contact {
            height: 60px;
            background: #eeeff1;
            border-radius: 5px;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            .dongTai_middle_pic_DanQu_contact_img {
              width: 60px;
              height: 60px;
              margin-right: 10px;
              @include flex;
              .el-image {
                width: 50px;
                height: 50px;
                border-radius: 5px;
              }
            }
            .dongTai_middle_pic_DanQu_contact_text {
              height: 40px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;

              .dongTai_middle_pic_DanQu_contact_text_name {
                font-size: 14px;
              }
              .dongTai_middle_pic_DanQu_contact_text_ar {
                display: flex;
                font-size: 12px;
                color: #909399;
              }
            }
          }
          .video-player {
            width: 300px;
            height: 200px;
          }
          .dongTai_middle_pic_DanQu_contact_imgArray {
            width: 400px;
            display: flex;
            flex-wrap: wrap;

            .dongTai_middle_pic_DanQu_contact_imgArray_img {
              width: 30%;
              height: 120px;
              margin-bottom: 5px;
              margin-right: 5px;
              .el-image {
                width: 100%;
                height: 100%;
                border-radius: 5px;
              }
            }
          }
        }
        .dongTai_middle_pic_DanQu {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .dongTai_middle_pic_DanQu_title {
            color: #66b1ff;
            font-size: 14px;
            margin-bottom: 5px;
          }
          .dongTai_middle_pic_DanQu_contact {
            height: 60px;
            background: #eeeff1;
            border-radius: 5px;
            display: flex;
            align-items: center;
            .dongTai_middle_pic_DanQu_contact_img {
              width: 60px;
              height: 60px;
              margin-right: 10px;
              @include flex;
              .el-image {
                width: 50px;
                height: 50px;
                border-radius: 5px;
              }
            }
            .dongTai_middle_pic_DanQu_contact_text {
              height: 40px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .dongTai_middle_pic_DanQu_contact_text_name {
                font-size: 14px;
              }
              .dongTai_middle_pic_DanQu_contact_text_ar {
                display: flex;
                font-size: 12px;
                color: #909399;
              }
            }
          }
        }
        .dongTai_zhuanFa {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .dongTai_zhuanFa_txt {
            font-size: 13px;
            margin-bottom: 10px;
          }
          .dongTai_zhuanFa_otherDongTai {
            background: #eeeff1;
            border-radius: 5px;
            display: flex;
            align-items: center;
            padding: 10px;
            font-size: 12px;
            .delete_dongTai {
              @include flex;
              width: 100%;
            }
            .dongTai_zhuanFa_otherDongTai_name {
              color: #66b1ff;
              cursor: pointer;
              margin-right: 5px;
              margin-bottom: 5px;
            }
            .dongTai_zhuanFa_otherDongTai_contact {
              color: rgb(144, 147, 153);
            }
          }
        }
        .fenXiang_MV {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .video-player {
            width: 300px;
            height: 200px;
          }
        }
        .fengXang_BoKe {
          width: 85%;
          padding: 5px 30px 5px 15px;
          .fengXang_BoKe_txt {
            font-size: 13px;
            margin-bottom: 10px;
          }
          .fengXang_BoKe_contact {
            height: 60px;
            background: #eeeff1;
            border-radius: 5px;
            display: flex;
            align-items: center;
            .fengXang_BoKe_contact_img {
              width: 60px;
              height: 60px;
              margin-right: 10px;
              @include flex;
              .el-image {
                width: 50px;
                height: 50px;
                border-radius: 5px;
              }
            }
            .fengXang_BoKe_contact_right {
              height: 40px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              .fengXang_BoKe_contact_right_title {
                font-size: 13px;
                display: flex;
                align-items: center;
                .fengXang_BoKe_contact_right_title_left {
                  color: rgb(122, 192, 17);
                  border: 1px solid rgb(122, 192, 17);
                  padding: 2px;
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
      .dongTai_container_contact_inside_bottome {
        display: flex;
        justify-content: center;
        .dongTai_container_contact_inside_bottome_middle {
          width: 82%;
          display: flex;
          flex-direction: row-reverse;
          .dongTai_container_contact_inside_bottome_middle_inside {
            font-size: 12px;
            padding-left: 15px;
            padding-right: 15px;
            border-right: 1px solid #eeeff1;
            display: flex;
          }
        }
      }
    }
  }
  .no_this_dongTai {
    @include flex;
    margin-bottom: 20px;
  }
}
</style>
